<template>
    <div>
        <!-- Container element for all TalkJS UI elements -->

        <div class="chatbox-container">
            <van-nav-bar
                title="Chat"
                left-arrow
                @click-left="$router.push('/')"
            />

            <!-- Custom TalkJS chat header -->
            <!--<div id="chatbox-header">-->

            <!--<div id="header-bg"></div>-->

            <!--<div id="user-avatar"></div>-->
            <!--<p id="header-subject">Subject</p>-->
            <!--<p id="header-alt">Offered by <span id="header-username">Username</span></p>-->

            <!--</div>-->

            <div id="talkjs-container" style="width: 100%; height: 560px"></div>

        </div>
        <footer-bar ref="footer" footerBar="chat"></footer-bar>

    </div>
</template>

<script>
    import FooterBar from '@/components/FooterBar'

    export default {
        name: 'chat',
        metaInfo: {
            title: 'chat',
            titleTemplate: '%s',
            meta: [
                {name: 'keywords', content: 'shop sell'},
                {name: 'description', content: 'shopgogo'}
            ]
        },
        // middleware: ['login'],
        components: {
            FooterBar
        },
        data() {
            return {
                isChating: false,
            };
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 返回按钮执行之后  如果modal存在 则不会退
            if (this.isChating) {
                if (this.$route.query.fromType == 'index') {
                    // 处理成到list
                    this.isChating = false;
                    this.records = [];
                    next(false);
                } else {
                    next();
                }
            } else {
                next();
            }
        },
        mounted() {

            // 获取本地存储中的数据
            let userInfo = localStorage.getItem("userInfo") || '';

            if (userInfo) {
                userInfo = JSON.parse(userInfo) || '';
            }

            if (this.$route.query.fromType == 'index') {
                if(this.$store.state.store.chatLoginStatus == 'disconnect'){
                    window.applozic.init({
                        appId: "shopgogo10f31d4f3ff119f89b60ba", //Get your application key from https://www.applozic.com
                        userId: userInfo.id, //Logged in user's id, a unique identifier for user
                        userName: userInfo.name, //User's display name
                        imageLink: userInfo.photo || 'https://www.tolymoly.com.mm/user-head.png', //User's profile picture url
                        desktopNotification: true,
                        source: "6", // optional, WEB(1),DESKTOP_BROWSER(5), MOBILE_BROWSER(6)
                        notificationIconLink: "https://www.applozic.com/favicon.ico", //Icon to show in desktop notification, replace with your icon
                        authenticationTypeId: 1, //1 for password verification from Applozic server and 0 for access Token verification from your server
                        accessToken: "", //optional, leave it blank for testing purpose, read this if you want to add additional security by verifying password from your server https://www.applozic.com/docs/configuration.html#access-token-url
                        locShare: true,
                        autoTypeSearchEnabled: true, // set to false if you don't want to allow sending message to user who is not in the contact list
                        loadOwnContacts: false, //set to true if you want to populate your own contact list (see Step 4 for reference)
                        topicBox: true,
                        onInit: (response) => {
                            if (response === "success") {
                                $applozic.fn.applozic('loadTab', '');
                                // login successful, perform your actions if any, for example: load contacts, getting unread message count, etc
                            } else {
                                // error in user login/register (you can hide chat button or refresh page)
                            }
                        },
                        contactDisplayName: function (otherUserId) {
                            //return the display name of the user from your application code based on userId.
                            return "";
                        },
                        contactDisplayImage: function (otherUserId) {
                            //return the display image url of the user from your application code based on userId.
                            return "";
                        },
                        onTabClicked: function (response) {
                            // write your logic to execute task on tab load
                            //   object response =  {
                            //    tabId : userId or groupId,
                            //    isGroup : 'tab is group or not'
                            //  }
                        }
                    });
                }else{
                    $applozic.fn.applozic('loadTab', '');
                }


            } else {  // 已经登录，从广告详情到聊天详情

                if(this.$store.state.store.chatLoginStatus == 'disconnect'){
                    window.applozic.init({
                        appId: "shopgogo10f31d4f3ff119f89b60ba", //Get your application key from https://www.applozic.com
                        userId: userInfo.id, //Logged in user's id, a unique identifier for user
                        userName: userInfo.name, //User's display name
                        imageLink: userInfo.photo || 'https://www.tolymoly.com.mm/user-head.png', //User's profile picture url
                        desktopNotification: true,
                        source: "6", // optional, WEB(1),DESKTOP_BROWSER(5), MOBILE_BROWSER(6)
                        notificationIconLink: "https://www.applozic.com/favicon.ico", //Icon to show in desktop notification, replace with your icon
                        authenticationTypeId: 1, //1 for password verification from Applozic server and 0 for access Token verification from your server
                        accessToken: "", //optional, leave it blank for testing purpose, read this if you want to add additional security by verifying password from your server https://www.applozic.com/docs/configuration.html#access-token-url
                        locShare: true,
                        autoTypeSearchEnabled: true, // set to false if you don't want to allow sending message to user who is not in the contact list
                        loadOwnContacts: false, //set to true if you want to populate your own contact list (see Step 4 for reference)
                        topicBox: true,
                        onInit: (response) => {
                            if (response === "success") {
                                console.log("连接成功");

                                // 发起一个新的聊天
                                $applozic.fn.applozic("loadContextualTab", {
                                    userId: this.$route.query.targetId || '', // userId whom you want to add in topic based chat
                                    topicId: this.$route.query.googsID, //Unique identifier for product/Topic
                                    topicDetail: {
                                        title: this.$route.query.goodsTitle || '', // Product Title
                                        // subtitle: "sub-title", //Product Sub-title
                                        link: this.$route.query.goodsPhotoUrl || 'https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F47edad6a000a40d19f369fc6cc683b57%2Fin-arlington-virginia-a-drafty-house-was-made-more-than-twice-as-efficient-with-the-addition-of-metal-both-inside-and-out-roof-panels-topping-the-brick-envelope-echo-its-original-geometry.jpg?alt=media&token=bea34579-566c-4cfb-8186-05b2c45273e2', //Product Image Link
                                        key1: "Ks", //Small text anything Like qty(Optional)
                                        value1: "8888", //Value of key 1
                                    },
                                    status: "new"
                                });

                                // login successful, perform your actions if any, for example: load contacts, getting unread message count, etc
                            } else {
                                // error in user login/register (you can hide chat button or refresh page)
                            }
                        },
                        contactDisplayName: function (otherUserId) {
                            //return the display name of the user from your application code based on userId.
                            return "";
                        },
                        contactDisplayImage: function (otherUserId) {
                            //return the display image url of the user from your application code based on userId.
                            return "";
                        },
                        onTabClicked: function (response) {
                            // write your logic to execute task on tab load
                            //   object response =  {
                            //    tabId : userId or groupId,
                            //    isGroup : 'tab is group or not'
                            //  }
                        }
                    });
                }else{
                    // 发起一个聊天
                    $applozic.fn.applozic("loadContextualTab", {
                        userId: this.$route.query.targetId || '', // userId whom you want to add in topic based chat
                        topicId: this.$route.query.googsID, //Unique identifier for product/Topic
                        topicDetail: {
                            title: this.$route.query.goodsTitle || '', // Product Title
                            // subtitle: "sub-title", //Product Sub-title
                            link: this.$route.query.goodsPhotoUrl || 'https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F47edad6a000a40d19f369fc6cc683b57%2Fin-arlington-virginia-a-drafty-house-was-made-more-than-twice-as-efficient-with-the-addition-of-metal-both-inside-and-out-roof-panels-topping-the-brick-envelope-echo-its-original-geometry.jpg?alt=media&token=bea34579-566c-4cfb-8186-05b2c45273e2', //Product Image Link
                            key1: "Ks", //Small text anything Like qty(Optional)
                            value1: "8888", //Value of key 1
                        },
                        status: "new"
                    });
                }

            }

        }
    };
</script>

<style>
    #mck-sidebox-launcher {
        display: none!important;
    }
    #mck-sidebox{
        width: 100% !important;
    }
    .mck-box-backdrop {
        width: 100% !important;
    }
    .mck-box-dialog {
        width: 100% !important;
    }

    .chatbox-container {
        width: 100%;
        margin: auto;
    }

    /* Custom header for the chatbox*/
    #chatbox-header {
        width: 100%;
        height: 110px;
        position: relative;
        background-color: #000;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        /* Slightly curve the top of the header */
        border-radius: 10px 10px 0 0;
        margin-bottom: -3px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
    }

    #header-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: inherit;
        opacity: 0.6;
    }

    #user-avatar {
        position: absolute;
        height: 50px;
        width: 50px;
        background-color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 50%;
        border: 2px solid #eee;
    }

    #chatbox-header p {
        font-family: "Helvetica", sans-serif;
        color: #eee;
        margin: 0;
    }

    #header-subject {
        position: absolute;
        font-size: 32px;

        left: 70px;
        top: 7px;
    }

    #header-alt {
        position: absolute;
        left: 70px;
        top: 42px;
        font-size: 18px;
    }

    /* Notification toggle */
    .toggle-container {
        text-align: right;
        position: absolute;
        bottom: 15px;
        right: 10px;
    }

    .toggle-container p {
        display: inline;
        font-size: 10px;
        padding-right: 10px;
        vertical-align: middle;
    }

    .toggle {
        vertical-align: middle;
        display: inline-block;
        position: relative;
        width: 51px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        height: 18px;
    }

    .toggle-checkbox {
        display: none;
    }

    .toggle-label {
        display: block;
        overflow: hidden;
        height: 17px;
        padding: 0;
        line-height: 17px;
        border: 0px solid #eee;
        border-radius: 28px;
        background-color: rgba(135, 135, 135, 0.75);
    }

    .toggle-label:before {
        content: "";
        display: block;
        width: 28px;
        margin: -5.5px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 30px;
        border-radius: 28px;
        box-shadow: 0 6px 5px 0px #000;
    }

    .toggle-checkbox:checked + .toggle-label {
        background-color: #0CCC26;
    }

    .toggle-checkbox:checked + .toggle-label, .toggle-checkbox:checked + .toggle-label:before {
        border-color: #0CCC26;
    }

    .toggle-checkbox:checked + .toggle-label {
        margin-left: 0;
    }

    .toggle-checkbox:checked + .toggle-label:before {
        right: 0px;
        background-color: #FFFFFF;
        box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
    }

    .foot .van-field__control {
        /*min-height: 32px;*/
        line-height: 24px;
        border: 1px solid #eee;
        padding: 5px 6px;
    }

    .foot .van-field__body {
        background: #fff;
    }

    .foot .van-hairline--top-bottom:after {
        border-width: 0;
    }

    .foot .con.van-cell {
        /*position: absolute;*/
        /*left: 66px;*/
        /*right: 40px;*/
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-y: auto;
        font-size: 14px;
        line-height: 14px;
        width: auto;
        padding: 0;
    }
</style>
